<template>
	<view class="flex flex-ai-center flex-js-sb mt-12">
		<view class="flex flex-ai-center">
			<view class="sort">
				<view class="flex plr-12 font-size-12 font-w-600 flex-center sortItemCon">
				    <text class="font-color-666">类别</text>
				    <u-icon :class="{ up: show }" class="ml-4" name="arrow-down-fill" size="8" color="#666"></u-icon>
				</view> 
			</view>
			<view class="sort ml-8">
				<view class="flex plr-12 font-size-12 font-w-600 flex-center sortItemCon">
				    <text class="font-color-666">售卖状态</text>
				    <u-icon :class="{ up: show }" class="ml-4" name="arrow-down-fill" size="8" color="#666"></u-icon>
				</view> 
			</view>
		</view>
		<view class="flex-center font-size-12 font-color-999">
			<view class="flex-center" >
				<text class="mr-4">价格升序</text>
				<w-icon name="sort" size="10" v-if="!['priceAsc','pricedDesc'].includes(sortType)"></w-icon>
				<w-icon name="sort-active" size="10" v-else :class="{'sortDesc':sortType=='pricedDesc'}"></w-icon>
			</view>
			<view class="flex-center ml-24" >
				<text class="mr-4">时间倒序</text>
				<w-icon name="sort" size="10" v-if="!['zhangfuAsc','zhangfuDesc'].includes(sortType)"></w-icon>
				<w-icon name="sort-active" size="10" v-else :class="{'sortDesc':sortType=='zhangfuDesc'}"></w-icon>
			</view>
			<!-- <view class="flex-center ml-24" @click="handSaleSolt">
				<text class="mr-4">成交量</text>
				<w-icon name="sort" size="10" v-if="!['saleAsc','saleDesc'].includes(sortType)"></w-icon>
				<w-icon name="sort-active" size="10" v-else :class="{'sortDesc':sortType=='saleDesc'}"></w-icon>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentName: {
				type: String,
				default: '综合排序'
			}
		},
		data() {
		    return {
				sortType:'',
		        show: false,
		        currentType: "time",
		        height: "100%",
		    };
		},
		methods: {
			targetShow() {
				this.$emit('targetShow')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sort {
	    height: 74rpx;
	    .sortItemCon {
	        height: 52rpx;
			background-color: #F5F5F5;
			color: #222;
			border-radius: 26rpx;
			box-shadow: 0px 2px 4px 0px rgba(213,215,223,0.1);
			font-weight: 600;
	    }
	}
	
	.up {
	    transform: rotate(180deg);
	}
	
	.current {
	    color: #9d1718;
	}
	
	.item {
	    &::after {
	        display: block;
	        content: "";
	        width: 2rpx;
	        height: 20rpx;
	        background-color: #cecfd3;
	        margin-left: 17rpx;
	        margin-right: 17rpx;
	    }
	
	    &:last-child {
	        &::after {
	            display: none;
	        }
	    }
	}
	
	.sort-con {
	    width: 100%;
	    padding-top: 16rpx;
	    border-top: 2rpx solid #eee;
	    margin-top: 32rpx;
	    > view {
	        width: 100%;
	        height: 70rpx;
	        display: flex;
	        align-items: center;
	        justify-content: space-between;
	        font-size: 26rpx;
	        font-weight: 500;
	    }
	}
</style>